<template>
  <div id="SingleText" v-loading="loading">
    <!-- 文本输入框 -->
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="20">
        <el-tabs type="border-card" :value="'文件上传'">
          <!-- 文本输入框 -->
          <el-tab-pane name="文件上传">
            <span slot="label" class="tab_data_input">
              <i class="el-icon-document"></i>
              文件上传
            </span>
            <el-divider></el-divider>
            <el-upload
              class="upload-drag"
              action=""
              drag
              ref="upload"
              :file-list="fileList"
              :auto-upload="false"
              :on-change="onChange"
              :accept="'.jpg,.png'">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                选择或拖放数据文件
                <div>支持上传.jpg,.png</div>
              </div>
            </el-upload>
          </el-tab-pane>
        </el-tabs>
        <el-row type="flex" pull="2" push="2" justify="end" class="el-row-stype">
          <el-button type="primary" @click="startAnaly()">开始分析</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 结果展示框 tabs -->
    <el-row type="flex" class="row-bg el-row-stype" justify="center" v-show="src">
      <el-col :span="20" style="text-align: center;">
        <el-image class="preview-img" :src="src" :preview-src-list="[src]"></el-image>
        <el-table
          :data="predictData"
          style="width: 100%"
          v-loading="loading"
          :max-height="300">
          <el-table-column label="标记信息">
            <template slot-scope="scope">
              {{scope.row}}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/modules/index/utils/request';

export default {
  name: "SingleText",
  data() {
    return {
      fileList: [],
      src: '',
      predictData: [],
      loading: false
    };
  },
  computed: {},
  // 页面加载完成执行的方法
  mounted() {
    /*
    // 通过 api 获取类别的待选数据
    request('/label/getType', {
      method: 'post',
    }).then((res) => {
    // http.post("/label/getType").then((res) => {
      var arrayData = Object.values(JSON.parse(res.data.result))[0];
      var typeArray = new Array();
      for (var i = 0; i < arrayData.length; i++) {
        var typeCH = this.typeCHs[arrayData[i]];
        var arr = {
          name: typeCH == null ? arrayData[i] : typeCH,
          option: arrayData[i],
        };
        typeArray[i] = arr;
      }
      this.startAnalyDataOptions.types = typeArray;
      if (arrayData.length > 0) {
        this.startAnalyData.type = arrayData[0];
      }
    });
    */
  },
  methods: {
    onChange (files, fileList) {
      const name = files.name;
      if (name.includes('.jpg') || name.includes('.png')) {
        this.fileList = [files];
      } else {
        this.$message({ type: 'warning', message: '请上传图片文件' });
        this.fileList = [];
      }
    },
    hasOwn (target, key) {
      return Object.hasOwnProperty.call(target, key);
    },
    async startAnaly () {
      if (!this.fileList.length) {
        this.$message({ type: 'warning', message: '请提交文件' });
        return;
      }
      const formData = new FormData();
      formData.append('File',  this.fileList[0].raw);
      this.loading = true;
      try {
        const res = await this.$store.dispatch('openAbilityPlatformPredictTaskOcrSingle', formData);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.src = data.imgPath || '';
          this.predictData = data.predictData && data.predictData.length ? data.predictData : [];
        } else {
          this.src = '';
          this.$message({ type: 'error', message: '提交失败' });
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this components only -->
<style lang="less" scoped>
.preview-img {
  max-width: 100%;
  margin-bottom: 20px;
}
.row-bg {
  background-color: #f9fafc;
  padding: 20px;
}
.el-row-stype {
  margin-top: 20px;
  padding: 0.25rem;
}
.tag-margin {
  margin: 0 5px 5px 0;
  color: #5c3317;
}
.top-margin {
  margin-top: 0.75rem;
}
.el-row-tab {
  min-height: 25rem;
}
/* 自定义 v-charts 没有数据显示的状态 */
.data-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  color: #888;
  font-size: 14px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
#SingleText {
  text-align: center;
}
.tag-margin {
  margin: 0 5px 5px 0;
  color: #5c3317;
}
.top-margin {
  margin-top: 0.75rem;
}
.el-row-tab {
  min-height: 25rem;
}

.upload-drag {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: 0;
}
.upload-drag /deep/ .el-upload {
  width: 600px;
}
.upload-drag /deep/ .el-upload-dragger {
  width: 600px;
}
</style>
